<!--
 * @Description: 项目管理-发起项目
 * @Author gong
 * @create 2024/9/4 11:53
 -->
<!--setup-->
<script setup>
import { onMounted, getCurrentInstance, ref, provide } from 'vue'
import TabHeader from '../tab-header' // 头部tab组件
import useRouterPlus from '@/router/use-router-plus'
import prjInfoApi from '@/api/modules/prj-info' // api接口
import { to } from 'sf-utils2'
import { ElMessage } from 'element-plus'
import BaseSkeleton from '@shared/base/base-skeleton/index.vue' // 骨架屏公共组件
import { useActiveComponent } from '@shared/hooks/use-active-component'
import { defineAsyncComponentHoc } from '@shared/utils/scanner-files' // 懒加载组件

const { proxy } = getCurrentInstance()
const props = defineProps({})
const emit = defineEmits([])
const { route, router } = useRouterPlus()

/* 状态 */
const baseInfo = ref({ id: route.query?.id }) // 项目基础信息

const coreCode = ref(route.query?.coreCode || '') // 核心业务编码

const tabList = [
  { name: 'basic', label: '基础信息' },
  { name: 'auth', label: '项目权限' }
]

const { activeTab, activeComponent, componentInstances, registerComponentInstance } = useActiveComponent({
  // 基础信息
  basic: defineAsyncComponentHoc(() => import('./basic-info')),
  // 项目权限
  auth: defineAsyncComponentHoc(() => import('./project-auth'))
})

provide('__projBaseInfo__', baseInfo)
provide('__coreCode__', coreCode) // 核心业务编码

/* 方法 */
/**
 * 获取项目数据
 */
const getInfo = async () => {
  console.log(route.query)
  const [res, err] = await to(prjInfoApi.getPrjInfoDetail({ id: route.query?.id }))
  if (err || res?.code !== 200) return ElMessage.error(res?.message || String(err))
  baseInfo.value = res.data || {}
}

/**
 * 切换tab
 * @param val
 */
const handleClick = (val) => {
  console.log('val, ', val)
}

/**
 * 保存数据
 */
const onSave = async () => {
  try {
    let components = componentInstances.value

    const basicParams = await components.basic?.onSave()
    const authParams = await components.auth?.onSave()

    const params = Object.assign(baseInfo.value, basicParams, authParams)

    const [res, err] = await to(prjInfoApi.editPrjInfo(params))
    if (err || res?.code !== 200) return ElMessage.error(res?.message || String(err))
    ElMessage.success('保存成功')
    // 关闭返回页面并刷新
    router.closeTab(undefined, { autoJump: false })
    router.push({ path: '/project/approval', refresh: true })
  } catch (e) {
    // 内部会有错误抛出，这里只是为了捕获错误
    console.error(e)
  }
}

/* 计算 */

/* 监听 */

/* 周期 */
onMounted(() => {
  getInfo()
})

/* 暴露 */
defineExpose({
  $: proxy.$
})
</script>

<!--render-->
<template>
  <div class="page flex h-page flex-col gap-4 overflow-hidden">
    <!-- 内容区 -->
    <BaseSkeleton :initial="baseInfo.prjCode">
      <TabHeader
        v-model="activeTab"
        :title="baseInfo.prjName"
        :tab-data="tabList"
        class="flex-none"
        @tab-click="handleClick"
      >
        <template #buttons>
          <el-button
            type="primary"
            @click="onSave"
          >
            保存
          </el-button>
        </template>
      </TabHeader>

      <keep-alive>
        <component
          :is="activeComponent"
          :ref="registerComponentInstance"
          :base-info="baseInfo"
          :coreCode="coreCode"
          class="flex-1 overflow-y-auto"
        />
      </keep-alive>
    </BaseSkeleton>
  </div>
</template>

<!--style-->
<style scoped lang="less"></style>
